<template>

    <!-- 添加或修改对话框 -->
    <lam-dialog :title="title" :visible.sync="open" width="70%" top="6vh" @close="cancel">
      <el-form :ref="formRef" :model="form" label-width="100px" >
        <div class="main" v-loading="loading">
          <div class="content">
            <div class="order-number">
              <el-steps v-if="form.status == 6" :active="stepsStatus" align-center process-status='error'>
                <el-step title="提交订单" :description="form.createTime"></el-step>
                <el-step title="买家已付款" :description="form.payTime" v-if="form.payTime"></el-step>
                <el-step title="卖家已发货" :description="form.dvyTime" v-if="form.dvyTime"></el-step>
                <el-step title="买家已收货" :description="form.finallyTime" v-if="form.finallyTime"></el-step>
                <el-step title="订单关闭" :description="form.cancelTime"></el-step>
              </el-steps>
              <el-steps v-if="form.status < 6" :active="stepsStatus" align-center process-status='wait'>
                <el-step title="提交订单" :description="form.createTime"></el-step>
                <el-step title="买家已付款" :description="form.payTime"></el-step>
                <el-step title="卖家已发货" :description="form.dvyTime"></el-step>
                <el-step title="买家已收货" :description="form.finallyTime"></el-step>
              </el-steps>
            </div>
            <div class="order-content-detail">
              <div class="state-cont">
                <div class="state-title">
                  <el-form-item label="订单编号:" label-width="74px" style="width: 250px;">
                    <span class="text">{{form.orderNumber}}</span>
                  </el-form-item>
                  <el-form-item label="订单状态:" label-width="74px" style="width: 250px;">
                    <span style="color: red;font-weight: bold;font-size: 20px;">{{form.statusDictText}}</span>
                    <el-button @click="getOrderData()" type="primary" plain size="small" style="margin-left: 10px;">刷新订单</el-button>
                  </el-form-item>
                  <el-form-item style="width: 100px; " v-if="form.status === 2" >
                    <!-- <el-button type="info" style="margin-left: 20px;">打印订单</el-button> -->
                    <el-button type="primary" style="margin-left: 20px;" @click="toOrderDevy()" v-hasPerms="['mall:order:delivery']">发货</el-button>
                  </el-form-item>
                </div>
                <div class="order-info">
                  <div class="detail-addr-summay">
                    <div class="detail-title">
                      <i class="el-icon-truck icon"/>
                      <span class="prompt">买家付款后才可以发货</span>
                      <span class="detail-addr-dvy">
                        <span>运单号：</span>
                        <span v-if="form.dvyFlowNo" >
                          <span class="detail-addr-dvy-no" @click="openDvyInfo">{{form.dvyIdDictText}}  {{form.dvyFlowNo}}</span>
                          <a v-if="dvyForm.queryUrl" target="_blankDvy" class="a-href" :href="dvyForm.queryUrl" style="margin-left: 5px;">物流信息</a>
                          <ClipboardButton :content="form.dvyFlowNo" buttonText="复制运单号" size="mini" style="margin-left: 5px;"/>
                        </span>
                        <span v-else>无</span>
                      </span>
                    </div>
                    <div class="detail-addr">
                      <div class="detail01">
                        <div class="text-width">
                          <el-form-item label="收货人：">
                            <span>{{form.orderAddr.receiver}}</span>
                            <el-button type="primary" plain icon="el-icon-edit" @click="toUpdOrderAddr" v-hasPerms="['mall:orderAddr:edit']"
                               v-if="form.status === 1 ||form.status === 2" size="mini" style="margin-left: 20px;">修改地址</el-button>
                          </el-form-item>
                          <el-form-item label="收货手机：">
                            <span>{{form.orderAddr.mobile}}</span>
                          </el-form-item>
                          <el-form-item label="收货地址：">
                            <span>{{form.orderAddr.detailAddr}}</span>
                            <i class="el-icon-location icon" />
                          </el-form-item>
                        </div>
                      </div>
                      <div class="detail01 ticket" >
                        <el-form-item label="发票：">
                          <span>不开发票</span>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                  <div class="buyers">
                    <div class="detail-title" style="padding-left: 10px;">
                      <i class="el-icon-s-custom icon" />
                      <el-form-item label="买家:" style="margin-top:5px" label-width="46px">
                        <span>{{form.nickName}}</span>
                      </el-form-item>
                    </div>
                    <div class="buyers-info" style="padding-left: 10px;">
                      <div class="detail02">
                        <!-- <img src="~@/assets/img/message.png" alt=""> -->
                        <div class="text-width">
                          <span>买家备注:</span>
                          <br>
                          <span>{{form.remarks}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item-list">
                  <el-table :data="form.orderItems" border>
                    <el-table-column prop="" label="商品" align="center">
                      <template slot-scope="scope">
                        <div class="prod-con">
                          <img :src="resourceUrl + scope.row.pic" class="prod-img"/>
                          <span style="display: block;">
                            <span class="prod-cell">{{scope.row.prodName}}</span>
                            <span class="prod-cell prod-info">{{scope.row.skuName}}</span>
                          </span>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价" width="150" align="center">
                      <template slot-scope="scope">
                        <span class="prod-cell">{{scope.row.price}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="count" label="数量" width="150" align="center">
                      <template slot-scope="scope">
                        <span class="prod-cell">{{scope.row.prodCount}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="totalPrice" label="总价" width="150" align="center">
                      <template slot-scope="scope">
                        <span class="prod-cell">{{scope.row.totalAmt}}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="order-summay">
                  <div class="order-log">
                    <div class="log-title">
                        订单日志
                        <el-button @click="getOrderLogList()" type="primary" plain size="small" style="margin-left: 10px;">刷新</el-button>
                        <el-button @click="toAddOrderLog()" plain size="small" style="margin-left: 10px;">添加订单日志</el-button>
                        <el-button v-if="form.status != 6" @click="toCloseOrder()" type="danger" plain size="small" style="margin-left: 10px;">强制关闭订单</el-button>
                    </div>
                    <div v-loading="orderLogLoading" class="order-log-list">
                      <div class="log-item" v-for="item in orderLogList" :key="item.id">
                        <span v-if="item.operType==1" style="color: #03a9f4;">{{item.createTime}}  {{item.operTypeDictText}}  {{item.operRemark}}</span>
                        <span v-else-if="item.operType==2" style="color: mediumvioletred;">{{item.createTime}}  {{item.operTypeDictText}}({{item.createBy}})  {{item.operRemark}}</span>
                        <span v-else>{{item.createTime}}  {{item.operTypeDictText}}  {{item.operRemark}}</span>
                      </div>
                    </div>
                  </div>

                  <div class="order-amt">
                    <el-form-item label="商品总额:">
                      <span class="order-amt-text" style="color: red;">￥{{form.total}}</span>
                    </el-form-item>
                    <el-form-item label="运费:">
                      <span class="order-amt-text">+￥{{form.dvyAmount}}</span>
                    </el-form-item>
                    <el-form-item label="优惠金额:">
                      <span class="order-amt-text" style="color: green;">-￥{{form.reduceAmount}}</span>
                    </el-form-item>
                    <el-form-item label="订单金额:">
                      <span class="order-amt-text" style="font-weight: bold;">￥{{form.actualTotal}}</span>
                    </el-form-item>
                    <el-form-item label="实付金额:" v-if="form.status > 1">
                      <span class="order-amt-text" style="color: red;font-weight: bold;">￥{{form.payAmt?form.payAmt:0}}</span>
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" type="primary">关  闭</el-button>
      </div>

      <EditOrderAddr ref="orderAddrDialog" @ok="updOrderAddrOk"/>

      <OrderDevy ref="orderDevyDialog" @ok="orderDevyOk"/>

      <OrderDevyInfo ref="orderDevyInfoDialog" />

      <AddOrderLog ref="addOrderLogDialog" @ok="addOrderLogDialogOk"/>

    </lam-dialog>

</template>

<script>
import ClipboardButton from "@/components/ClipboardButton";
import { EditMixin } from '@/components/mixins/EditMixin';
import OrderStatus from './OrderStatus';
import EditOrderAddr from './editOrderAddr';
import OrderDevy from './orderDevy';
import OrderDevyInfo from './orderDevyInfo';
import AddOrderLog from './addOrderLog';

export default {
  name: "EditOrder",
  mixins:[EditMixin],
  components: {
    OrderStatus,
    EditOrderAddr,
    OrderDevy,
    OrderDevyInfo,
    AddOrderLog,
    ClipboardButton
  },
  data() {
    return {
      form: {orderAddr: {}},
      url: {
        base: '/mall/order/',
        listOrderLog: '/mall/orderLog/list',
        dvyInfo: '/mall/delivery/dvyInfo',
      },
      orderLogList:[],
      orderLogLoading: false,
      dvyForm:{}
    };
  },
  computed:{
    resourceUrl() {
      return this.$store.getters.resourceUrl
    },
    stepsStatus: function () {
      if (this.form.cancelTime) {
        return 5
      }
      if (this.form.finallyTime) {
        return 4
      }
      if (this.form.dvyTime) {
        return 3
      }
      if (this.form.payTime) {
        return 2
      }
      if (this.form.creatTime) {
        return 1
      }
    },
  },
  created() {
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {orderAddr: {}};
    },

    getOrderData(){
      this.loading = true;
      this.$httpGet(this.url.base + this.form.id).then(res=>{
        this.form = res.data;
      }).finally(res=>{
        this.loading = false;
      });
    },

    getOrderLogList(data){
      this.orderLogLoading = true;
      data = data ? data : this.form;
      this.$httpGet(this.url.listOrderLog, {orderNumber: data.orderNumber}).then(res=>{
        this.orderLogList = res.data
      }).finally(res=>{
        this.orderLogLoading = false;
      })
    },

    /** 在执行proms后打开弹窗之前，返回true则中断打开弹窗 */
    beforeOpen(title, operType, res){
      if(!res.data.orderAddr){
        res.data.orderAddr = {}
      }
      this.getOrderLogList(res.data);
      if(res.data.dvyId && res.data.dvyFlowNo){
        this.getDvyData(res.data.dvyId, res.data.dvyFlowNo)
      }
    },

    /** 提交按钮 */
    submitForm(){
      this.saveForm(this.url.base);
    },

    toUpdOrderAddr(){
      this.$refs.orderAddrDialog.toUpdate("", this.form.orderAddr);
    },
    updOrderAddrOk(orderAddr){
      this.$nextTick(()=>{
        this.form.orderAddr = Object.assign(this.form.orderAddr, orderAddr);
        this.getOrderLogList()
      })
    },

    toOrderDevy(){
      this.$refs.orderDevyDialog.toUpdate("发货", {orderNumber: this.form.orderNumber});
    },
    orderDevyOk(){
      this.getOrderData()
      this.getOrderLogList();
    },

    getDvyData(dvyId, dvyFlowNo){
      this.$httpGet(this.url.dvyInfo, {id: dvyId, dvyFlowNo: dvyFlowNo}).then(res=>{
        this.dvyForm = res.data;
      })
    },

    openDvyInfo(){
      this.$refs.orderDevyInfoDialog.show(this.form.dvyId, this.form.dvyFlowNo);
    },

    toAddOrderLog(){
      this.$refs.addOrderLogDialog.toAdd("添加订单日志", {orderNumber: this.form.orderNumber, opType: 'addLog'});
    },
    toCloseOrder(){
      this.$refs.addOrderLogDialog.toAdd("强制关闭订单", {orderNumber: this.form.orderNumber, opType: 'closeOrder'});
    },
    addOrderLogDialogOk(orderLog){
      if(orderLog&&orderLog.opType=='closeOrder'){
        this.getOrderData()
      }
      this.getOrderLogList();
    }

  }
};
</script>
<style scoped>
.el-step__description{
  font-size: 16px !important;
}
.a-href {
  color: red !important;
  cursor: pointer !important;
  text-decoration: underline !important;
}

.order-log-list{
  max-height: 300px;
  overflow: auto;
}

.el-form-item {
    margin-bottom: 3px;
}
.icon{
  font-size: 24px;
  margin-right: 5px;
}

.main {
  height: 100%;
  width: 100%;
  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti,
    "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #495060;
}

.content {
  margin: 0 20px;
}

.content .steps {
  margin-top: 50px;
}

.order-number .number-text {
  font-weight: bold;
}

.order-number .text {
  font-size: 14px;
  color: #8a8a8a;
}

.order-content-detail .state-title {
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  border-top: 1px solid #e9eaec;
  padding-top: 10px;
}

.title-left span {
  font-weight: bold;
}

.title-left .text {
  color: red;
}

.state-title .title-mid {
  display: flex;
  align-items: center;
}

.title-mid img {
  width: 18px;
  height: 18px;
}

.title-mid .mid-text {
  color: red;
}

.title-mid .text {
  color: #8a8a8a;
}

.content .order-content-detail {
  position: relative;
  margin-top: 8px;
  border-bottom: 1px solid #e9eaec;
}

.order-content-detail .order-info {
  width: 100%;
  border-top: 1px solid #e9eaec;
  margin-top: 10px;
  display: flex;
}

.order-info img {
  width: 18px !important;
  height: 18px !important;
  margin-right: 15px;
}

.order-info .detail-title {
  height: 40px;
  display: flex;
  align-items: center;
}

.order-info .detail-addr-summay {
  width: 60%;
  border-right: 1px solid #e9eaec;
  padding-bottom: 4px;
}

.order-info .buyers {
  width: 40%;
}

.order-info .detail-addr {
  position: relative;
}

.detail-addr .detail01 {
  display: flex;
  height: 100%;
  line-height: 25px;
  margin-top: 10px;
}
.ticket{
  border-top: 1px dashed rgb(233, 234, 236);
  padding-top: 5px;
}

.detail01 .text-width {
  width: 100%;
}

.detail02 .text-width {
  width: 100%;
}

.detail-addr-dvy{
  right: calc( 40% + 10px );
  position: absolute;
}
.detail-addr-dvy-no{
  color: blue;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 5px;
}
.detail-addr .revise-addr {
  color: #4395ff;
  position: absolute;
  top: 15px;
  right: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.order-info .detail-addr {
  border-top: 1px dashed #e9eaec;
}

.buyers .buyers-info {
  border-top: 1px dashed #e9eaec;
  position: relative;
}

.buyers .detail02 {
  display: flex;
  height: 100%;
  line-height: 25px;
  margin-top: 15px;
}

.buyers .revise-remarks {
  color: #4395ff;
  position: absolute;
  top: 15px;
  right: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.order-summay{
  display: flex;
  text-align: left;
}
.order-amt{
  width: 450px;
  padding: 5px 0;
}
.order-log{
  width: calc( 100% - 450px);
  border-right: 1px solid #ebeef5;
}
.order-log .log-title {
  line-height: 50px;
  font-weight: bold;
  margin-left: 10px;
  border-bottom: 1px dashed #e9eaec;
}
.order-log .log-item {
  margin: 6px 10px;
}
.prod-cell{
  font-size: 16px;
}
.prod-info {
  display: block;
  color: #80848f;
  margin-top: 45px;
  text-align: left;
}

.item-list .prod-con {
  display: flex;
}
.item-list .prod-con .prod-img {
  width: 100px;
  height: 100px;
  margin-right: 8px;
}
</style>
